 <script setup>
import {reactive, ref, onMounted} from "vue";
import {frequencySearch, numTestAnalysis, threadTestAnalysis} from "@/api/algorithmDesign/index.js";
import WordFrequencyChart from "@/components/algorithmDesign/WordFrequencyChart.vue";
import { Eleme } from '@element-plus/icons-vue'
import NumTestChart from "@/components/algorithmDesign/NumTestChart.vue";
import ThreadTestChart from "@/components/algorithmDesign/ThreadTestChart.vue";
/*------------- 定义变量开始 ---------------*/
const activeNames = ref(['1']);

//查找关键词
const num = ref(10)
const frequencyData = reactive([
  {
    "word": "图片",
    "num": 8207
  },
  {
    "word": "手机",
    "num": 6161
  },
  {
    "word": "意思",
    "num": 5493
  },
  {
    "word": "小说",
    "num": 4778
  },
  {
    "word": "视频",
    "num": 4635
  },
  {
    "word": "2016",
    "num": 4357
  },
  {
    "word": "下载",
    "num": 4120
  },
  {
    "word": "大全",
    "num": 3657
  },
  {
    "word": "中国",
    "num": 3015
  },
  {
    "word": "qq",
    "num": 2894
  }
])
const wordLoading = ref(false)

//num影响
const numTestData = reactive([
  {
    "name": "Ansj_num",
    "dataList": [
      129,
      227,
      161,
      227,
      375,
      568,
      451,
      589,
      586,
      680
    ]
  },
  {
    "name": "Ansj_nothread_num",
    "dataList": [
      494,
      957,
      1043,
      1139,
      1510,
      2490,
      1964,
      2408,
      3101,
      3103
    ]
  },
  {
    "name": "HanLP_num",
    "dataList": [
      52,
      105,
      171,
      211,
      234,
      274,
      343,
      399,
      424,
      557
    ]
  },
  {
    "name": "HanLP_nothread_num",
    "dataList": [
      309,
      558,
      819,
      1947,
      2492,
      4210,
      4120,
      4084,
      5218,
      5589
    ]
  },
  {
    "name": "Word_num",
    "dataList": [
      1485,
      2904,
      4392,
      5866,
      7192,
      8661,
      10089,
      11667,
      13276,
      14647
    ]
  }
])
const numTestLoading = ref(false)
//thread影响
const threadTestData = reactive([
  {
    "name": "Ansj_thread",
    "dataList": [
      5748,
      3089,
      2030,
      1757,
      1279,
      628,
      591,
      562
    ]
  },
  {
    "name": "Ansj_half_thread",
    "dataList": [
      172,
      48,
      46,
      32,
      31,
      27,
      41,
      25
    ]
  },
  {
    "name": "HanLP_thread",
    "dataList": [
      3713,
      1690,
      1532,
      934,
      1260,
      749,
      984,
      710
    ]
  },
  {
    "name": "HanLP_half_thread",
    "dataList": [
      124,
      79,
      46,
      47,
      33,
      58,
      64,
      58
    ]
  }
])
const threadTestLoading = ref(false)

//Dom节点
const wordFrequencyChartRef = ref(null)
const numTestChart = ref(null)

/*------------- 定义函数开始 ---------------*/
const handleChange = (activeNames) => {

}
const wordFreSearch = () => {
  wordLoading.value = true
  if(!/^[1-9]\d*$/.test(num.value)) {
    num.value = 20;
  }
  frequencySearch(num.value).then(res => {
    frequencyData.length = 0
    frequencyData.push(...res.data)
  }).then(() => {
    wordLoading.value =false
  })
}
const numTest = () => {
  numTestLoading.value = true
  numTestAnalysis().then((res) => {
    numTestData.length = 0
    numTestData.push(...res.data)
  }).then(() => {
    numTestLoading.value = false
  })
}
const threadTest = () => {
  threadTestLoading.value = true
  threadTestAnalysis().then((res) => {
    threadTestData.length = 0
    threadTestData.push(...res.data)
  }).then(() => {
    threadTestLoading.value = false
  })
}
</script>

<template>
  <div class="view-container">
    <div class="title-box animate__animated animate__fadeInDown">
      <h1 class="view-title">算法测试</h1>
    </div>
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="种子关键词词频查找" name="1">
        <div class="test-box animate__animated animate__fadeInDown">
          <el-input class="input1" v-model="num" placeholder="请输入词频统计个数" @keyup.enter="wordFreSearch"/>
          <el-container v-loading="wordLoading" class="word-display-box">
            <div v-for="(item, index) in frequencyData" :key="item.word" class="grid-item">
              <p style="font-size: 15px;font-weight: bolder;margin-bottom: 10px;">{{ item.word }}</p>
              <p style="color: #EC5832">{{ item.num }}</p>
            </div>
          </el-container>
          <el-container v-loading="wordLoading">
            <WordFrequencyChart :words="frequencyData" ref="wordFrequencyChartRef"/>
          </el-container>
        </div>

      </el-collapse-item>
      <el-collapse-item title="搜索长度对算法的影响" name="2">
        <div class="test-box animate__animated animate__fadeInDown">
          <el-container v-loading="numTestLoading">
            <NumTestChart :num-test-data="numTestData" ref="numTestChart"/>
          </el-container>
          <div class="button-div">
            <el-button type="primary"  :loading-icon="Eleme" :loading="numTestLoading" @click="numTest">开始测试</el-button>
          </div>
        </div>

      </el-collapse-item>
      <el-collapse-item title="多线程对算法的影响" name="3">
        <div class="test-box animate__animated animate__fadeInDown">
          <el-container v-loading="threadTestLoading">
            <ThreadTestChart :thread-test-data="threadTestData" ref="threadTestChartRef"/>
          </el-container>
          <div class="button-div">
            <el-button type="primary"  :loading-icon="Eleme" :loading="threadTestLoading" @click="threadTest">开始测试</el-button>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>




  </div>
</template>

<style scoped>
.view-container{
  padding-top: 20px;
  width: 90%;
  overflow: hidden;
}
.title-box{
  animation-duration: 0.2s;
}
.view-title{
  font-size: 40px;
  font-weight: bolder;
  margin-bottom: 30px;
}

/*词频统计*/
.test-box{
  width: 100%;
  animation-duration: 0.2s;
}
.input1{
  width: 100%; /* 子组件的宽度为父组件宽度的一半 */
  flex: 2;
  margin:0
}
.word-display-box{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr ;
  grid-gap: 20px 30px;
  margin-top: 20px;
}
.grid-item{
  border-radius: 10px;
  border: 1.5px solid #EC5832;
  transition: all 0.2s linear;
  padding: 20px;
}
.grid-item:hover{
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.button-div{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>